Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

report: update keyframes for confetti animation #15059

Merged
merged 2 commits into from
May 10, 2023
Merged

report: update keyframes for confetti animation #15059

merged 2 commits into from
May 10, 2023
+5 −1

Conversation

tannerdolby
Copy link
Contributor

@tannerdolby tannerdolby commented May 10, 2023 •
edited
Loading

Summary

Fixes #12563

Updates the bang and gravity keyframes that are used for the perfect score confetti animation.

When the lh-pyro-before and lh-pyro-after elements (the confetti) move from one position to the next, we can still see the box-shadow's which makes up the confetti spread sort of abruptly move/flicker to a new position. This is due to the elements still having a visible opacity when moving from point1 (spot near where last confetti went off) -> point2 (new confetti position).

Current Confetti Behavior

abrupt/buggy at some points where we can see the confetti spread flicker from one spot to its destination due to opacity/visibility when moving to a new position, it doesn't happen always but is noticeable over time.

confetti-animation-abrupt-movement.mov

Confetti After Change

confetti-animation-tweaked.mov

Related Issues/PRs

#13635

@tannerdolby tannerdolby requested a review from a team as a code owner May 10, 2023 06:38
@tannerdolby tannerdolby requested review from adamraine and removed request for a team May 10, 2023 06:38
@connorjclark
Copy link
Collaborator

Oh this is great, thanks for working on this!

Can you make the changes to report/assets/styles.css instead? If you then run yarn build-report, it will update the component.js file (which is a hacky generated file not meant to be edited directly).

@tannerdolby
Copy link
Contributor Author

tannerdolby commented May 10, 2023 •
edited
Loading

Glad to hear that, you're welcome!

Sure thing, I made the changes in report/assets/templates.html as that's where the confetti animation styling lived and used yarn build-report to generate the output file. When editing the report/renderer/components.js file directly, it felt like I might have been missing something. Thanks for the heads up.

@paulirish
Copy link
Member

omg. thank you for figuring this out! it's been bugging all of us for a long time.

this is huge. :)

also lol @ patch-12563. that's a branch with style. 💅 cheers.

@tannerdolby
Copy link
Contributor Author

tannerdolby commented May 10, 2023 •
edited
Loading

@paulirish you're welcome! it was bugging me for awhile too, i'm really happy that we were able to find a fix :)

thanks lol 💅 I think that branch naming has become habit. cheers!

@adamraine adamraine merged commit 3d78192 into GoogleChrome:main May 10, 2023
@tannerdolby tannerdolby deleted the patch-12563 branch May 10, 2023 21:43
@LGNDDOLLABOUTIQUE

This comment was marked as spam.

Sign in to view
@LGNDDOLLABOUTIQUE

This comment was marked as spam.

Sign in to view
@LGNDDOLLABOUTIQUE

This comment was marked as spam.

Sign in to view
@LGNDDOLLABOUTIQUE

This comment was marked as spam.

Sign in to view
@LGNDDOLLABOUTIQUE

This comment was marked as spam.

Sign in to view
@LGNDDOLLABOUTIQUE

This comment was marked as spam.

Sign in to view
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@adamraine adamraine adamraine approved these changes

Assignees

@adamraine adamraine

Labels
waiting4reviewer
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Perfect score animation acting buggy
6 participants
@tannerdolby @connorjclark @paulirish @LGNDDOLLABOUTIQUE @adamraine @devtools-bot